import React, {Component} from 'react';
import {connect} from 'dva';
import Info from './info/Info';
import Limit from './limit/Limit';
import Category from './category/Category'
import PhoneDialog from "./dialog/PhoneDialog";
import VideoDialog from "./dialog/VideoDialog";
import DeleteDialog from "./dialog/DeleteDialog";
import WebsiteDialog from "./dialog/WebsiteDialog";
import AddressDialog from "./dialog/AddressDialog";
import ShoppersDialog from "./dialog/ShoppersDialog";
import SearchDialog from "./dialog/SearchDialog";
import MapRangeDialog from "./dialog/MapRangeDialog";
import DistrictsDialog from "./dialog/DistrictsDialog";
import NonauthorizedDialog from "./dialog/NonauthorizedDialog";
import editorActions from "../../actions/recognize";
import {bindActionCreators} from 'redux';
import Waitting from '../waitting/Waitting'

class Recognize extends Component {
    constructor(props) {
        super(props);
        this.state = {
            delete: "",
            dialog: "",
            wait: false,
            popupDialog: "",
            positionLimitDialog: "",
        }
    }

    getDetailsDialog(type) {
        const details = this.props.recognize,
            detail = details[type],
            dialogs = {
                website: <WebsiteDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                        updateState={(state, value)=>this.updateState(state,value)}/>,
                phone: <PhoneDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                    updateState={(state, value)=>this.updateState(state,value)}/>,
                shoppers: <ShoppersDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                          updateState={(state, value)=>this.updateState(state,value)}/>,
                video: <VideoDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                    updateState={(state, value)=>this.updateState(state,value)}/>,
                address: <AddressDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                        updateState={(state, value)=>this.updateState(state,value)}/>,
                search_nearby: <SearchDialog data={detail} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                             updateState={(state, value)=>this.updateState(state,value)}/>,
                deleteDetail: <DeleteDialog type={this.state.delete} removeDetails={(type)=>this.removeDetails(type)}
                                            updateState={(state, value)=>this.updateState(state,value)}/>
            };
        return dialogs[type] || "";
    }

    getPositionLimitDialog(type) {
        const limits = this.props.recognize,
            data = limits["position_limit"],
            dialogs = {
                map: <MapRangeDialog data={data} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                     updateState={(state, value)=>this.updateState(state,value)}/>,
                districts: <DistrictsDialog data={data} saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}
                                            updateState={(state, value)=>this.updateState(state,value)}/>
            };
        return dialogs[type] || "";
    }

    getPopupDialog(type) {
        const dialogs = {
            nonauthorized: <NonauthorizedDialog updateState={(state, value)=>this.updateState(state,value)}/>
        };
        return dialogs[type] || "";
    }

    saveRecognizeProperty(data,type) {
        data.resource_id = this.props.recognize.resource_id;
        data.method=type||'post';
        this.props.saveRecognizeProperty(data)
    }

    saveProperty(data) {
        this.props.saveResourceProperty({resource_tag_title: data.resource_tag_title, cate_id: data.cate_id});
    }

    removeDetails(type) {
        const detailsMapping = {
            phone: "",
            website: "",
            video: {},
            address: {},
            shoppers: {},
            search_nearby: {}
        };
        /*
        * shoppers组件中  传递方法未PUT
        * */
        let details = {};
        details[type] = detailsMapping[type];
        const method=type=='shoppers'?'PUT':'POST';
        this.saveRecognizeProperty(details,method);
    }

    updateState(state, value) {
        let params = {};

        if (typeof state === "string") {
            params[state] = value;
        } else {
            params = state;
        }

        this.setState(params);
    }

    initData(data) {
        //初始化detail格式
        const detailKeys = ["address", "phone", "video", "website", "shoppers", "search_nearby"];
        let details = {};
        for (let key in data) {
            if ($.inArray(key, detailKeys) != -1) {
                if (typeof data[key] == "object") {
                    if (!$.isEmptyObject(data[key])) {
                        details[key] = data[key];
                    }
                } else {
                    if (data[key]) {
                        details[key] = data[key];
                    }
                }
            }
        }
        return details
    }

    render() {
        const detailsDialog = this.getDetailsDialog(this.state.dialog);
        const popupDialog = this.getPopupDialog(this.state.popupDialog);
        const positionLimitDialog = this.getPositionLimitDialog(this.state.positionLimitDialog);
        const recognize = this.props.recognize;
        const limits = {
            time_limit: recognize.time_limit,
            position_limit: recognize.position_limit
        }
        const details = this.initData(recognize)
        let recognizeNode = "";
        if (!this.state.wait) {
            recognizeNode =
                <div className="recognize-container">
                    <div className="recognize-content">
                        <Info data={recognize} saveProperty={(data)=>this.saveProperty(data)}
                              saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)}/>
                        <Limit limits={limits}  saveRecognizeProperty={(data,type)=>this.saveRecognizeProperty(data,type)} updateState={(state, value)=>this.updateState(state,value)}/>
                        <Category details={details} updateState={(state, value)=>this.updateState(state,value)} />
                        { popupDialog }
                        { detailsDialog }
                        { positionLimitDialog }
                    </div>
                </div>
        }

        return (
            <div>
                <Waitting wait={this.state.wait}/>
                {recognizeNode}
            </div>
        )
    }
}


const mapStateToProps = ({recognize}) => {
    return {recognize};
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(editorActions, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Recognize);
